<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Redux</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

    const color = (state = {}, action) => {
      switch (action.type) {
          case "ADD_COLOR":
              return {
                  id: action.id,
                  title: action.title,
                  color: action.color,
                  timestamp: action.timestamp,
                  rating: 0
              }
          case "RATE_COLOR":
              return (state.id !== action.id) ?
                  state :
                  {
                      ...state,
                      rating: action.rating
                  }
          default :
              return state
      }
    }

    const colors = (state = [], action) => {
      switch (action.type) {
          case "ADD_COLOR" :
              return [
                  ...state,
                  color({}, action)
              ]
          case "RATE_COLOR" :
              return state.map(
                  c => color(c, action)
              )
          case "REMOVE_COLOR" :
              return state.filter(
                  c => c.id !== action.id
              )
          default:
              return state
      }
    }

    let currentColors = [
    {
      id: 1,
      title: "Berry Blue",
      color: "#000066",
      rating: 0,
      timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
    }
    ]
    console.log(currentColors)



    let action =  {
      type: "ADD_COLOR",
      id: 2,
      title: "Party Pink",
      color: "#F142FF",
      timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)"
    }
    let newColors = colors(currentColors, action)
    console.log( newColors )



    action = {
     type: "RATE_COLOR",
     id: 1,
     rating: 5
    }
    newColors = colors(newColors, action)
    console.log( newColors )



    action = {
     type: "REMOVE_COLOR",
     id: 2
    }
    newColors = colors(newColors, action)
    console.log( newColors )


  </script>
</body>
</html>
